<template>
  <div class="contentManager">
    <div></div>
    <main>
      <!-- 右侧主内容区 -->
      <div class="main-right">
        <dynamic-form :sendData="someData">
        </dynamic-form>

        <dynamic-table :sendData="someData">
        </dynamic-table>

        <!--分页条-->
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </main>
  </div>
</template>

 <script>
 import Vue from 'vue'
 import Element from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import 'element-ui/lib/index.js'
 Vue.use(Element)
 import dynamicForm from './../../components/dynamic-form.vue'
 import dynamicTable from './../../components/dynamic-table.vue'


 export default {
  name: 'preView',
  components:{
        dynamicForm, dynamicTable
      },
  props: [

   ],
  data: function (){
    return {
     active:true,
     //表格数据
     someData: {
        templateId:"",
        formItemList:[],
        tableItemList:[],
        tableItemDataList:[]
      }
    }
  },
  watch:{

  },
  methods: {
    handleInput(val, key) {
      // 这里element-ui没有上报event，直接就是value了
      this.$emit('input', { ...this.value, [key]: val })
      console.log('handleInput')
    },
    runBtnEvent(item) {

    },
    add(){
       this.$router.push({name:"addContent", params:{templateId: this.someData.templateId}})
     },
     update(){

     }
  },
  created (){//无法在这里面直接调用method中的方法
        this.$http.get('http://127.0.0.1:8080/preView/'+this.$route.params.templateId).then(function(result){
            var body = result.body
            if (body.success === true) {

                if(!body.payload.formItemList){
                  return
                }
                this.someData.templateId = body.payload.templateId
                body.payload.formItemList.forEach((item) => {
                    this.someData.formItemList.push(item);
                 })
                if(!body.payload.tableItemList){
                  return
                }
                body.payload.tableItemList.forEach((item) => {
                    this.someData.tableItemList.push(item);
                 })
                body.payload.tableItemDataList.forEach((item) => {
                    this.someData.tableItemDataList.push(item);
                 })
                console.log(this.someData.tableItemList)
            }
            },function(result){
               alert(result.status)
            });
   },
  render:{
  }
 }
 </script>

 <style>
     #contentManager {
         font-family: Helvetica, sans-serif;
         text-align: center;
     }
 </style>
